<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.modal.add()">{{ $t('add') }}</a-button>
    </div>
    <s-table ref="table" rowKey="id" :data="loadData" size="default" :showPagination="false">
      <a-table-column title="部门名称" dataIndex="name" key="name" />
      <a-table-column title="排序" dataIndex="sort" key="sort" align="center" width="80px" />
      <a-table-column title="操作" key="action" align="center" width="120px">
        <template slot-scope="text, record">
          <a @click="handleEdit(record)">修改</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </template>
      </a-table-column>
    </s-table>
    <dept-form-modal ref="modal" @ok="handleOk" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getDeptList } from '@/api/auth'
import { deleteMenu } from '@/api/sys'
import { listToTree } from '@/utils/util'
import DeptFormModal from './modules/DeptFormModal'

export default {
  name: 'Dept',
  data() {
    return {
      loadData: parameter => {
        return getDeptList({}).then(res => {
          const childrenList = []
          listToTree(res.data, childrenList, '0')
          res.data = childrenList
          console.log(res)
          return res
        })
      }
    }
  },
  created() {},
  methods: {
    handleEdit(record) {
      console.log(record)
      this.$refs.modal.edit(record)
    },
    handleDelete(record) {
      console.log(record.id)
      deleteMenu(record.id)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message.success(`'删除菜单 ${record.title} 成功'`, 3)
          }
          this.handleOk()
        })
        .catch(() => {})
    },
    handleOk() {
      this.$refs.table.refresh()
    }
  },
  components: {
    STable,
    DeptFormModal
  }
}
</script>

<style scoped></style>
